<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Tutorials - App Inventor for Android
    </title>
    <link href="../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c2 {border-width:0}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../about/index.html"><img alt="" src="../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Learn about App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../about/index.html">About</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../learn/index.html">Learn</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../forum/index.html">Forum</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">My Projects</a><div>(coming soon)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../learn/index.html">Learn</a> &gt; Tutorials &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Tutorials
              </h1>
              <h2>
                Basic
              </h2>
              <p>
                Once you've <a href="../../learn/setup/index.html">set up</a> your computer and built the HelloPurr app you are ready to begin these basic tutorials.
              </p>
              <ul id="tutorial">
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="paintpot/paintpot-part1.html">PaintPot</a><br>
                    PaintPot lets you scribble in different colors by touching the screen to draw dots and lines. Concepts introduced in this project include: Canvas components for drawing; event handlers that take arguments, including touch and drag events; and Arrangement components for controlling screen layout. <a href="paintpot/paintpot-part2.html">Part 2</a> extends the project to draw dots of different sizes, as an introduction to <em>global variables</em>.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="molemash/molemash.html">MoleMash</a><br>
                    In the arcade game Whac-a-Mole<sup>TM</sup>, a "mole" pops up at random positions on a playing field, and the user score points by hitting the mole with a mallet. This is a similar game that uses the touchscreen. This tutorial introduces: image sprites, timers, and procedures.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="piccall/piccall.html">PicCall</a><br>
                    PicCall illustrates how to create applications that use the phone's functionality. This application lets you select people from your contact list and display their pictures. When you press a picture picture, the phone calls that person.
                  </div>
                  <div class="clear"></div>
                </li>
              </ul>
              <h2>
                Advanced
              </h2>
              <p>
                These tutorials build on the things you learned in the beginner tutorials and explore App Inventor's more complex functionality.
              </p>
              <ul id="tutorial">
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="quizme/quizme.html">Quiz Me</a><br>
                    QuizMe is a trivia game about baseball, but you can use it as a template to build quizzes on any topic. With QuizMe the user steps through a series of questions, clicking a Next button to proceed to the next question. The user enters an answer for each question and the app reports whether each answer is correct or not. For this tutorial, you'll create an app in which the questions are always the same unless you, the programmer, change them. Later, you can create MakeAQuiz, an app that lets users create and modify the quiz questions.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="textgroup/textgroup.html">Text Group</a><br>
                    This tutorial introduces the Texting component for sending and processing texts. You'll build an app that texts a message to a list of phone numbers.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="makequiztakequiz/makequiztakequiz.html">MakeQuiz and TakeQuiz</a><br>
                    MakeQuiz and TakeQuiz are two apps that, in tandem, allow a teacher to create quizzes for a student. Parents can create fun trivia aps for their children during a long road trip, grade school teachers can build "Math Blaster" quizzes, and college students can build quizzes to help their study groups prepare for a final. This tutorial will walk you through creating both the MakeQuiz and the TakeQuiz app.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="maptour/maptour.html">Map Tour</a><br>
                    This is a two-part tutorial introduces the ActivityStarter component for launching arbitrary Android Apps and the ListPicker component for allowing a user to choose from a list of items. You'll build MapTour, an app for visiting French vacation destinations with a single click. Users of your app will be able to visit the Eiffel Tower, the Lourve, and Notre Dame in quick succession.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="textgroup2/textgroup2.html">Text Group Part 2</a><br>
                    This tutorial extends the Text Group tutorial. That app sent a text to a fixed list of phone numbers, and only the programmer could change the numbers in the list. The app in this tutorial allows the user to add and remove the phone numbers in the list, and it stores the list persistently in a database.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="broadcasterhub/broadcasterhub.html">Broadcaster Hub</a><br>
                    In this tutorial, you'll write an app that automatically responds to texts messages and broadcasts texts messages it receives to a list of phone numbers.The app is inspired by FrontLineSMS, a tool that has been used in developing countries to monitor elections, broadcast weather changes, and in general connect people that don't have access to the web but do have phones and mobile connectivity.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="notext/notext.html">No Text While Driving</a><br>
                    This tutorial demonstrates how an app can respond to text messages automatically. You'll build an app that sends back a response when a text message is received. The idea for the app came from University of San Franciso student Daniel Finnegan.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="notext/notext2.html">No Text While Driving Part 2</a><br>
                    You know that texting while driving is dangerous, so you've created and installed the No Text While Driving app on your phone. Now, when you drive you open that app and let it auto-respond to incoming texts. But the jingle of the texts coming in is killing you with curiosity-- wouldn't it be great if you could hear the texts spoken aloud? With Part II of the tutorial, you'll extend the app so that it speaks out both the message and who sent it. And since you're making some changes anyway, you'll modify the auto-response so it reports your whereabouts in the reply: "Sorry, I'm driving and I'm at 1600 Pennsylvania Avenue". Before completing this tutorial you should complete part I.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="whereismycar/whereismycar.html">Android, Where's My Car?</a><br>
                    You parked somewhere near the stadium or bar, but when the concert/party ends you don't have a clue where the car is. The friends you came with are equally as clueless. Fortunately you haven't lost your Android phone that never forgets anything, and you remember you have the hot new app, Android, Where's My Car?. With this app, you click a button when you park your car, and the Android uses its location sensor to record the car's GPS coordinates and address. Later, when you reopen the app, it shows you a map from where you are to the remembered location-- problem solved! With this tutorial you'll be able to download a created app and then study the annotated blocks below to better understand the app and App Inventor programming in general.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="stockquotes/stockquotes.html">Stock Quotes</a><br>
                    This tutorial demonstrates how to use the Web component to make an app call a web service (Yahoo! Finance) with a simple application programmer interface (API).
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="text">
                    <a class="title" href="molemash2/molemash2.html">MoleMash 2</a><br>
                    MoleMash2 provides an alternative implementation of the classic boardwalk game that demonstrates how to use the Advanced features in the Blocks Editor and how to layer Sprites.
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/" rel="license"><img alt="Creative Commons License" class="c2" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              This work is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              The original work by Google has been modified<br>
              <!-- The modified work was translated from English to [language]<br> -->
              <a href="../../about/index.html">About</a> | <a href="../../about/privacy.html">Privacy</a> | <a href="../../about/termsofservice.html">Terms</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
